import React, { useState, useEffect, Fragment } from 'react';
import Crumbs from '../../components/crumbs/index';
import { getStoreList } from '../../api/store';
import { Button, Table, Pagination, Select, message, DatePicker, Input } from 'antd';
const { RangePicker } = DatePicker;
import './scss/integral.scss';
const { Option } = Select;

const Integral = (props) => {

    const [CrumbsList] = useState([
        {
            name: '财务管理',
        },
        {
            name: '积分明细',
            url: '/integral',
        },
    ]);
    const [Integral, setIntegral] = useState([]);
    // 当前页数
    const [tableIndex, setTableIndex] = useState(1);
    // 一页显示多少个
    const [TabNum, setTabNum] = useState(6);
    const columns = [
        {
            title: '用户',
            dataIndex: 'key',
            align: 'center',
            render: (index) => (
                <div className="mallItem flex">
                    <img src={searchImgName(index)[0]} alt="image" className="mallKey" />
                    <div className="mallItemName">{searchImgName(index)[1]}</div>
                </div>
            ),
        },
        {
            title: '用户联系方式',
            align: 'center',
            dataIndex: '',
            render: () => <div>积分商品</div>,
        },
        {
            title: '积分变化',
            align: 'center',
            dataIndex: '',
            render: () => <div>兑换</div>,
        },
        {
            title: '当前积分',
            align: 'center',
            dataIndex: 'integration',
            render: (text) => <div>-{text}积分</div>,
        },
        {
            title: '备注',
            align: 'center',
            dataIndex: 'inventory',
        },
        {
            title: '操作人',
            align: 'center',
            dataIndex: 'state',
            render: (text) => <div>-{text}积分</div>,
        },
        {
            title: '操作时间',
            align: 'center',
            dataIndex: 'key',
            render: (text) => <div>-{text}积分</div>,
        },
    ];
    useEffect(() => {
        getStoreList().then((res) => {
            if (res.code === 200) {
                sortAllList(res);
            }
        });
        return () => { };
    }, []);
    // 分页器点击事件
    let pagChange = (e) => {
        setTableIndex(e);
    };
    // 下拉框change事件
    let selectChange = (e) => {
        setTabNum(e);
    };
    // 根据key值找到图片和名字
    let searchImgName = (key) => {
        let item = Integral.find((item) => item.key === key);
        let img = JSON.parse(item.imageList);
        return [img[0], item.name];
    };
    // 排序
    let sortAllList = (res) => {
        console.log(res);
        let dataList = res.data.reverse();
        let newData = dataList.sort((a, b) => a.sort - b.sort);
        for (let i = 0; i < newData.length; i++) {
            newData[i].index = i;
        }
        setIntegral(newData);
    };

    return (
        <div className="Integral">
            <Crumbs CrumbsList={CrumbsList} />
            <div className='integral_header'>
                <div>
                    <RangePicker />
                </div>
                <div className='integral_search'>
                    <div>
                        <Input placeholder="Basic usage" />
                    </div>
                    <Button>搜索</Button>
                    <Button>导出</Button>
                </div>
            </div>
            <div className="tableList">
                <Table
                    columns={columns} size="small"
                    dataSource={Integral.slice((tableIndex - 1) * TabNum, tableIndex * TabNum)}
                    bordered
                    pagination={false}
                    className="tableClassMall"
                />
            </div>
            <div className="mallPag">
                <span>共 {Integral.length} 条</span>
                <div className="mallSelect">
                    每页
                    <Select defaultValue="6" className="selsectClass" onChange={selectChange}>
                        <Option value="2">2</Option>
                        <Option value="4">4</Option>
                        <Option value="6">6</Option>
                        <Option value="8">8</Option>
                        <Option value="10">10</Option>
                    </Select>
                    条
                </div>
                <Pagination
                    size="small"
                    total={Integral.length}
                    showQuickJumper
                    current={tableIndex}
                    onChange={pagChange}
                    pageSize={TabNum}
                />
            </div>
        </div>
    );
};

export default Integral;
